<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 示例 -->
    <input type="text" id="txt" />
    <span id="msgBox"></span>

    <script>
      const txt = document.getElementById('txt')
      const msgBox = document.getElementById('msgBox')
      const obj = {}

      // 给对象obj添加msg属性，并设置setter访问器
      Object.defineProperty(obj, 'msg', {
        // 设置 obj.msg 执行的操作
        set: function (curVal) {
          txt.value = curVal
          msgBox.innerText = curVal
        },
      })

      // 监听文本框的改变
      txt.addEventListener('input', function (event) {
        obj.msg = this.value
      })
    </script>
  </body>
</html>
